<template>
  <view class="container">
    <view @click="uploadImage" class="upload-box">
      <span class="loading" v-if="loading">loading...</span>
      <span v-else-if="!imageUrl">+</span>
      <image
        v-show="imageUrl && !loading"
        style="width: 100%; height: 100%"
        :src="imageUrl"
        @load="load"
      ></image>
    </view>
    <view class="checkbox">
      <view
        v-for="item in example"
        :key="item.imageUrl"
        :style="'background:' + item.color"
        class="checkbox-item"
        @click="handlerCheckboxItemClick(item)"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: "upload-image",
  props: {
    imageUrl: {
      type: String,
      default: () => undefined,
    },
    example: {
      type: Array,
      default: () => [],
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
  },
  methods: {
    uploadImage() {
      this.$emit("upload");
    },
    handlerCheckboxItemClick(item) {
      const { imageUrl } = item;
      this.$emit("update:loading", true);
      this.$emit("update:image-url", imageUrl);
    },
    load() {
      this.$emit("update:loading", false);
    },
  },
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  flex-direction: column;
}
.upload-box {
  width: 100%;
  height: 338rpx;
  text-align: center;
  line-height: 338rpx;
  font-size: 48rpx;
  border: 1px solid black;
}
.checkbox {
  display: flex;
  align-items: center;
  margin-top: 16rpx;
}
.checkbox > .checkbox-item {
  border-radius: 50%;
  width: 48rpx;
  height: 48rpx;
  margin-right: 18px;
}
</style>